<template>
    <div id="rightCounty">
        <div class="bg-color-black">
            <div class="d-flex pt-2 pl-2">
                <span style="color:#5cd9e8">
                  <icon name="chart-bar"></icon>
                </span>
                <div class="d-flex">
                    <span>销售折线图</span>
                    <dv-decoration-3 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;"/>
                </div>
            </div>
            <div class="d-flex jc-center">
                <!-- <dv-water-level-pond style="width: 3.25rem;height:3.25rem;margin-top: .5rem;" :config="config" /> -->
				<div id="right2" style="width: 5.25rem;height:4.25rem;" ></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "rightCounty",
        data() {
            return {
        		option:{},
        		myChart:null,
            }
        },
        mounted() {
        	this.setOption();
        },
        methods: {
        	setOption(){
        		this.myChart = this.$echarts.init(document.getElementById('right2'));
        		this.option = {
						color: ['rgb(77,161,217)', 'rgb(78,196,232)', 'rgb(116,224,227)', 'rgb(162,231,185)','rgb(250,220,97)','rgb(250,160,128)'],
					  tooltip: {
						trigger: 'axis'
					  },
					  legend: {
						data: ['华东', '华南', '华北','东北', '华中', '其他'],
						    textStyle: {
						        color: "#fff", 
						    },
					  },
					  grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					  },
					  xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['第一季度', '第二季度', '第三季度', '第四季度'],
						axisLabel: {
						    textStyle: {
						        color: "#fff", 
						    },
						},
					  },
					  yAxis: {
						type: 'value',
						axisLabel: {
						    textStyle: {
						        color: "#fff", 
						    },
						},
					  },
					  series: [
						{
						  name: '华东',
						  type: 'line',
						  data: [20, 25, 30, 40]
						},
						{
						  name: '华南',
						  type: 'line',
						  data: [5, 8, 12, 15]
						},
						{
						  name: '华北',
						  type: 'line',
						  data: [4, 7, 13, 15]
						},
						{
						  name: '东北',
						  type: 'line',
						  data: [2, 5, 10, 15]
						},
						{
						  name: '华中',
						  type: 'line',
						  data: [3, 6, 11, 15]
						},
						{
						  name: '其他',
						  type: 'line',
						  data: [1, 2, 4, 5]
						}
					  ]
        		};
        		this.option && this.myChart.setOption(this.option);
        	},
        }
    }
</script>

<style lang="scss" scoped>
    #rightCounty {
        padding: 0.2rem;
        height: 5.125rem;
        min-width: 3.75rem;
        border-radius: 0.0625rem;
        .bg-color-black {
            height: 4.8125rem;
            border-radius: 0.125rem;
        }
        .text {
            color: #c3cbde;
        }
    }
</style>
